<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <currency-input
            label="Price"
            v-model="price"
    ></currency-input>
    <currency-input
            label="Shipping"
            v-model="shipping"
    ></currency-input>
    <currency-input
            label="Handling"
            v-model="handling"
    ></currency-input>
    <currency-input
            label="Discount"
            v-model="discount"
    ></currency-input>

    <p>Total: ${{ total }}</p>
</div>
<script src="../js/vue.min.js"></script>
<script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js"></script>
<script>
Vue.component('currency-input', {
    template: '<div>      <label v-if="label">{{ label }}</label>      $      <input        ref="input"        v-bind:value="value"        v-on:input="updateValue($event.target.value)"         >    </div>  ',
    props: {
        value: {
            type: Number,
            default: 0
        },
        label: {
            type: String,
            default: ''
        }
    },
    mounted: function () {
        this.formatValue()
    },
    methods: {
        updateValue: function (value) {
            var result = currencyValidator.parse(value, this.value)
            if (result.warning) {
                this.$refs.input.value = result.value
//                获取当前组件中属性ref中输入框的值 具体参考vue2.0杂项
            }
            this.$emit('input', result.value)
        },
        formatValue: function () {
            this.$refs.input.value = currencyValidator.format(this.value)
        },
        selectAll: function (event) {
            // Workaround for Safari bug
            // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
            setTimeout(function () {
                event.target.select()
            }, 0)
        }
    }
})

new Vue({
    el: '#app',
    data: {
        price: 0,
        shipping: 0,
        handling: 0,
        discount: 0
    },
    computed: {
        total: function () {
            return ((
                this.price * 100 +
                this.shipping * 100 +
                this.handling * 100 -
                this.discount * 100
            ) / 100).toFixed(2)
        }
    }
})
</script>
</body>
</html>